import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const app = createApp({
    data() {
        return {
            // 指定数据库搜索的数据
            searchForm: {
                name: "",
                gender: "",
                job: "",
            },
            empList: [],
        };
    },
    methods: {
        // // 同步功能修改前
        // search() {
        //     axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((res) => {
        //         this.empList = res.data.data;
        //     });
        // },
        async search() {
            const res = await axios.get(
                `https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`
            );
            this.empList = res.data.data;
        },
        clear() {
            this.searchForm.name = "";
            this.searchForm.gender = "";
            this.searchForm.job = "";
            this.search();
        },
    },
    // 注意：mounted()需要与methods同级，否则会认为是普通方法
    mounted() {
        this.search();
    },
});

app.mount("#app");
